<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en" dir="ltr">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../codebase/default.css" type="text/css" media="screen" title="no title" charset="utf-8"><title>
    dhtmlxtree:compatibility_with_other_dhtmlx_components    [DHX documentation]
  </title></head>

<body>
<div class="dokuwiki">
  
  <div class="stylehead">

    <div class="header">
    <a class="logo" href="http://dhtmlx.com" title="DHTMLX Home Page"></a>
    <span class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</span>

    <div class="search-field">
        <form action="/dhtmlx/docs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>    </div>
        <div class="buttons">
                <a class="doc"></a>
                <a title="DHTMLX Samples homepage" href="../samples.html" class="sample"/></a>
        </div>
     <!-- <div class="pagename">
        [[<a href="#"  title="Backlinks">dhtmlxtree:compatibility_with_other_dhtmlx_components</a>]]
      </div>
      <div class="logo">
        <a href="/dhtmlx/docs/doku.php"  name="dokuwiki__top" id="dokuwiki__top" accesskey="h" title="[H]">DHX documentation</a>      </div>

      <div class="clearer"></div>-->
        
    </div>

    
<!--   <div class="bar" id="bar__top">
      <div class="bar-left" id="bar__topleft">
        <form class="button btn_edit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Edit this page" class="button" accesskey="e" title="Edit this page [E]" /></div></form>        <form class="button btn_revs" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>      </div>

      <div class="bar-right" id="bar__topright">
        <form class="button btn_recent" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="recent" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Recent changes" class="button" accesskey="r" title="Recent changes [R]" /></div></form>        <form action="/dhtmlx/docs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>&nbsp;
      </div>

      <div class="clearer"></div>
    </div> -->

<!--        <div class="breadcrumbs">
      <span class="bchead">Trace:</span> <span class="bcsep">&raquo;</span> <span class="curid"><a href="/dhtmlx/docs/doku.php?id=dhtmlxtree:compatibility_with_other_dhtmlx_components"  class="breadcrumbs" title="dhtmlxtree:compatibility_with_other_dhtmlx_components">compatibility_with_other_dhtmlx_components</a></span>    </div>
    -->

    
  </div>
  
  
  <div class="page">
    <!-- wikipage start -->
    <!-- TOC START -->
<div class="toc">
<div class="tocheader toctoggle" id="toc__header">Table of Contents</div>
<div id="toc__inside">

<ul class="toc">
<li class="clear">

<ul class="toc">
<li class="level2"><div class="li"><span class="li"><a href="#compatibility_with_other_dhtmlx_components" class="toc">Compatibility with Other DHTMLX Components</a></span></div>
<ul class="toc">
<li class="level3"><div class="li"><span class="li"><a href="#enabling_contextual_menu" class="toc">Enabling Contextual Menu</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#contextual_menu_based_on_item_s_properties" class="toc">Contextual Menu Based on Item&#039;s Properties</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#contextual_menu_for_individual_items" class="toc">Contextual Menu for Individual Items</a></span></div></li></ul>
</li></ul>
</li></ul>
</div>
</div>
<!-- TOC END -->

<p>
<div class='backlinks'><div class='backlink last_backlink'><img src="icons___file.gif"  class="media" alt="" /><a href="../index.html" class="wikilink1" title="start">Index</a></div><div class='arrow'></div><div class='backlink last_backlink'><img src="icons___tree.gif"  class="media" alt="" /><a href="index.html" class="wikilink1" title="dhtmlxtree:toc">dhtmlxtree</a></div></div>

</p>

<h2><a name="compatibility_with_other_dhtmlx_components" id="compatibility_with_other_dhtmlx_components">Compatibility with Other DHTMLX Components</a></h2>
<div class="level2">

</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="53-111" /><input type="hidden" name="rev" value="1279031295" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Edit" class="button" title="Compatibility with Other DHTMLX Components" /></div></form></div>
<h3><a name="enabling_contextual_menu" id="enabling_contextual_menu">Enabling Contextual Menu</a></h3>
<div class="level3">

<p>
A contextual menu can be easily added to dhtmlxTree. The content of this menu can be set with <acronym title="Extensible Markup Language">XML</acronym> or script. To enable the contextual menu, the user should do the following:
</p>
<pre class="code javascript">&nbsp;
        <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>      
                <span class="co1">//initialization of the menu      </span>
            menu <span class="sy0">=</span> <span class="kw2">new</span> dhtmlXMenuObject<span class="br0">&#40;</span><span class="kw2">null</span><span class="sy0">,</span><span class="st0">&quot;standard&quot;</span><span class="br0">&#41;</span>;
            menu.<span class="me1">setImagePath</span><span class="br0">&#40;</span><span class="st0">&quot;[full path to this folder]/dhtmlxMenu/codebase/imgs/&quot;</span><span class="br0">&#41;</span>;
            menu.<span class="me1">setIconsPath</span><span class="br0">&#40;</span><span class="st0">&quot;[full path to this folder]/images/&quot;</span><span class="br0">&#41;</span>;    
            menu.<span class="me1">renderAsContextMenu</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;
            menu.<span class="me1">loadXML</span><span class="br0">&#40;</span><span class="st0">&quot;_context.xml&quot;</span><span class="br0">&#41;</span>;
&nbsp;
&nbsp;
&nbsp;
                <span class="co1">//initialization of the tree</span>
            tree <span class="sy0">=</span> <span class="kw2">new</span> dhtmlXTreeObject<span class="br0">&#40;</span><span class="st0">&quot;treeboxbox_tree&quot;</span><span class="sy0">,</span><span class="st0">&quot;100%&quot;</span><span class="sy0">,</span><span class="st0">&quot;100%&quot;</span><span class="sy0">,</span>0<span class="br0">&#41;</span>;
            ...
                <span class="co1">//link the contextual menu to the tree      </span>
            tree.<span class="me1">enableContextMenu</span><span class="br0">&#40;</span>aMenu<span class="br0">&#41;</span>;
        <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;
&nbsp;</pre>
</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="112-1029" /><input type="hidden" name="rev" value="1279031295" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Edit" class="button" title="Enabling Contextual Menu" /></div></form></div>
<h3><a name="contextual_menu_based_on_item_s_properties" id="contextual_menu_based_on_item_s_properties">Contextual Menu Based on Item&#039;s Properties</a></h3>
<div class="level3">

<p>
One contextual menu content can be attached to the whole tree. If the user wants the menu to be shown differently depending on the item it was called for, menu methods hideButtons/showButtons should be used.
</p>

<p>
Note: Refer for more information on the above mentioned menu buttons to dhtmlxMenu Guide and Code Samples documentation.

</p>
<pre class="code javascript">      <span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;treeboxbox_tree&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;width:200;height:200&quot;</span><span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span>
&nbsp;
&nbsp;
&nbsp;
      <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span> 
          <span class="kw2">function</span> onButtonClick<span class="br0">&#40;</span>menuitemId<span class="sy0">,</span>type<span class="br0">&#41;</span><span class="br0">&#123;</span>
              <span class="kw2">var</span> id <span class="sy0">=</span> tree.<span class="me1">contextID</span>;
              tree.<span class="me1">setItemColor</span><span class="br0">&#40;</span>id<span class="sy0">,</span>menuitemId.<span class="me1">split</span><span class="br0">&#40;</span><span class="st0">&quot;_&quot;</span><span class="br0">&#41;</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="br0">&#41;</span>;
          <span class="br0">&#125;</span>
              <span class="co1">//initialization of the menu</span>
          menu <span class="sy0">=</span> <span class="kw2">new</span> dhtmlXMenuObject<span class="br0">&#40;</span><span class="kw2">null</span><span class="sy0">,</span><span class="st0">&quot;standard&quot;</span><span class="br0">&#41;</span>;
          menu.<span class="me1">setImagePath</span><span class="br0">&#40;</span><span class="st0">&quot;[full path to this folder]/dhtmlxMenu/codebase/imgs/&quot;</span><span class="br0">&#41;</span>;
          menu.<span class="me1">setIconsPath</span><span class="br0">&#40;</span><span class="st0">&quot;[full path to this folder]/images/&quot;</span><span class="br0">&#41;</span>;
          menu.<span class="me1">renderAsContextMenu</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;
          menu.<span class="me1">setOpenMode</span><span class="br0">&#40;</span><span class="st0">&quot;web&quot;</span><span class="br0">&#41;</span>;
          menu.<span class="me1">attachEvent</span><span class="br0">&#40;</span><span class="st0">&quot;onClick&quot;</span><span class="sy0">,</span>onButtonClick<span class="br0">&#41;</span>;
          menu.<span class="me1">loadXML</span><span class="br0">&#40;</span><span class="st0">&quot;_context.xml&quot;</span><span class="br0">&#41;</span>;
              <span class="co1">//initialization of the tree</span>
          tree<span class="sy0">=</span><span class="kw2">new</span> dhtmlXTreeObject<span class="br0">&#40;</span><span class="st0">&quot;treeboxbox_tree&quot;</span><span class="sy0">,</span><span class="st0">&quot;100%&quot;</span><span class="sy0">,</span><span class="st0">&quot;100%&quot;</span><span class="sy0">,</span>0<span class="br0">&#41;</span>;
          tree.<span class="me1">setImagePath</span><span class="br0">&#40;</span><span class="st0">&quot;../imgs/&quot;</span><span class="br0">&#41;</span>;
          tree.<span class="me1">enableDragAndDrop</span><span class="br0">&#40;</span><span class="kw2">true</span><span class="br0">&#41;</span>;
          tree.<span class="me1">enableContextMenu</span><span class="br0">&#40;</span>menu<span class="br0">&#41;</span>;
              <span class="co1">//link contextual menu to the tree</span>
          tree.<span class="me1">loadXML</span><span class="br0">&#40;</span><span class="st0">&quot;tree.xml&quot;</span><span class="br0">&#41;</span>
&nbsp;
          tree.<span class="me1">attachEvent</span><span class="br0">&#40;</span><span class="st0">&quot;onBeforeContextMenu&quot;</span><span class="sy0">,</span><span class="kw2">function</span><span class="br0">&#40;</span>itemId<span class="br0">&#41;</span><span class="br0">&#123;</span>
              <span class="kw1">if</span> <span class="br0">&#40;</span>tree.<span class="me1">hasChildren</span><span class="br0">&#40;</span>itemId<span class="br0">&#41;</span> <span class="sy0">&gt;</span> 0<span class="br0">&#41;</span><span class="br0">&#123;</span>
                  menu.<span class="me1">hideItem</span><span class="br0">&#40;</span><span class="st0">'outher'</span><span class="br0">&#41;</span>;
              <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
                  menu.<span class="me1">showItem</span><span class="br0">&#40;</span><span class="st0">'outher'</span><span class="br0">&#41;</span>;
              <span class="br0">&#125;</span>
              <span class="kw1">return</span> <span class="kw2">true</span>
          <span class="br0">&#125;</span><span class="br0">&#41;</span>
      <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="1030-2743" /><input type="hidden" name="rev" value="1279031295" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Edit" class="button" title="Contextual Menu Based on Item's Properties" /></div></form></div>
<h3><a name="contextual_menu_for_individual_items" id="contextual_menu_for_individual_items">Contextual Menu for Individual Items</a></h3>
<div class="level3">

<p>
If the user wants to set different menus for individual tree items, he should use the following method:

</p>
<pre class="code javascript">      <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
          tree.<span class="me1">setItemContextMenu</span><span class="br0">&#40;</span>itemId<span class="sy0">,</span>cMenu<span class="br0">&#41;</span>;
      <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters here are responsible for:
</p>
<ul>
<li class="level1"><div class="li">  itemId - id of the item the contextual menu will be attached to;</div>
</li>
<li class="level1"><div class="li">  cMenu - contextual menu object that will be attached.</div>
</li>
</ul>

</div>
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="2744-" /><input type="hidden" name="rev" value="1279031295" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Edit" class="button" title="Contextual Menu for Individual Items" /></div></form></div>
    <!-- wikipage stop -->
  </div>

  <div class="clearer">&nbsp;</div>

  
  <div class="stylefoot">

    <div class="meta">
      <div class="user">
              </div>
     <!-- <div class="doc">
        dhtmlxtree/compatibility_with_other_dhtmlx_components.txt &middot; Last modified: 2010/07/13 17:28 (external edit)      </div>
    </div>-->

   
    <!--<div class="bar" id="bar__bottom">-->
      <!--<div class="bar-left" id="bar__bottomleft">-->
        <!--<form class="button btn_edit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Edit this page" class="button" accesskey="e" title="Edit this page [E]" /></div></form>-->
        <!--<form class="button btn_revs" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>-->
      <!--</div>-->
      <!--<div class="bar-right" id="bar__bottomright">-->
        <!---->
        <!---->
        <!---->
        <!---->
        <!---->
        <!--<form class="button btn_index" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="index" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Index" class="button" accesskey="x" title="Index [X]" /></div></form>-->
        <!--<a class="nolink" href="#dokuwiki__top"><input type="button" class="button" value="Back to top" onclick="window.scrollTo(0, 0)" title="Back to top" /></a>&nbsp;-->
      <!--</div>-->
      <!--<div class="clearer"></div>-->
    <!--</div>-->

  </div>

  

</div>

<div class="footerinc">


</div>

<div class="no"><img src="/dhtmlx/docs/lib/exe/indexer.php?id=dhtmlxtree%3Acompatibility_with_other_dhtmlx_components&amp;1279804934" width="1" height="1" alt=""  /></div>
     <div class="footer">
        <div class="footer-logo"></div>
        <div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
        <form class="button btn_edit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="" /><input type="hidden" name="id" value="dhtmlxtree:compatibility_with_other_dhtmlx_components" /><input type="submit" value="Edit this page" class="button" accesskey="e" title="Edit this page [E]" /></div></form>    	    </div>
</body>
</html>
